import React from "react";
import {HashRouter, Route, Routes, Link, Navigate } from "react-router-dom";

import { Provider } from 'react-redux';
import { store, persistor } from './redux/store';
import { PersistGate } from "redux-persist/integration/react";

import Login from "./views/login/Login";
import NewsSandBox from "./views/sandbox/NewsSandBox";
import NoFound from "./views/nofound/NoFound";

import News from "./views/news/News";
import Detail from "./views/news/Detail";

import './App.css';

// 需求：有些路由，需要登录才能访问，不登陆的情况下访问它就跳转到登录页面.
// RequireAuth 组件相当于一个拦截器，是否返回被拦截的组件要听他的
function RequireAuth({ children }) {
  const authed = localStorage.getItem('token')

  return authed
      ? ( children )  // 判断 localstorage 中登录状态是否为 true
      : ( <Navigate to="/login" replace /> );  // 跳转到登录（路由重定向）
}

// 使用了持久化的redux状态管理
export default function App() {
  return (
      <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
              <HashRouter>
                  {/*
                      <ul>
                          <li> <Link to="/login">login</Link> </li>
                          <li> <Link to="/">sandBox</Link> </li>
                      </ul>
                    */}

                  <Routes>
                      <Route path="/login" element={ <Login /> } />
                      <Route path="/nofound" element={ <NoFound /> } />

                      <Route path="/news" element={ <News /> } />
                      <Route path="/detail/:id" element={ <Detail /> } />

                      {/*<Route path="/" element={ <NewsSandBox></NewsSandBox> } />*/}

                      {/*子路由上的父路由必须加/* ,否则不会导航更深，父路由将不再匹配，因此子路由将永远不会渲染*/}
                      <Route path="/*" element={
                          <RequireAuth> {/*拦截组件*/}
                              <NewsSandBox /> {/*被拦截组件*/}
                          </RequireAuth>
                      } />
                  </Routes>
              </HashRouter>
          </PersistGate>
      </Provider>
  );
}


// 加了redux状态管理 store
/*
export default function App() {
    return (
        <Provider store={store}>
            <HashRouter>
                {/!*
                  <ul>
                      <li> <Link to="/login">login</Link> </li>
                      <li> <Link to="/">sandBox</Link> </li>
                  </ul>
                *!/}

                <Routes>
                    <Route path="/login" element={ <Login /> } />
                    <Route path="/nofound" element={ <NoFound /> } />

                    {/!*<Route path="/" element={ <NewsSandBox></NewsSandBox> } />*!/}

                    {/!*子路由上的父路由必须加/!* ,否则不会导航更深，父路由将不再匹配，因此子路由将永远不会渲染*!/}
                    <Route path="/!*" element={
                        <RequireAuth> {/!*拦截组件*!/}
                            <NewsSandBox /> {/!*被拦截组件*!/}
                        </RequireAuth>
                    } />
                </Routes>
            </HashRouter>
        </Provider>
    );
}
*/


// 未加 redux状态管理 store
/*
export default function App() {
    return (
        <HashRouter>
            {/!*
              <ul>
                  <li> <Link to="/login">login</Link> </li>
                  <li> <Link to="/">sandBox</Link> </li>
              </ul>
            *!/}

            <Routes>
                <Route path="/login" element={ <Login /> } />
                <Route path="/nofound" element={ <NoFound /> } />

                {/!*<Route path="/" element={ <NewsSandBox></NewsSandBox> } />*!/}

                {/!*子路由上的父路由必须加/!* ,否则不会导航更深，父路由将不再匹配，因此子路由将永远不会渲染*!/}
                <Route path="/!*" element={
                    <RequireAuth> {/!*拦截组件*!/}
                        <NewsSandBox /> {/!*被拦截组件*!/}
                    </RequireAuth>
                } />
            </Routes>
        </HashRouter>
    );
}
*/
